<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <button @click="handleToggle">切换</button>
        <div v-show="divShow" style="width: 100px; height: 100px; background-color: red;">
            <img v-bind:src="pic" width="100px" height="100px" alt="">
        </div>
        <div>
            <h1>编程语言</h1>
            <ul>
                <li v-for="(item, index) in langs" >{{item}}</li>
            </ul>
        </div>

        <div>
            <p>价格 {{price}}</p> 
            <p>价格 {{price | myCurrency('￥')}}</p> 
        </div>
    </div>

    <script>

        var app = new Vue({
            // el : 指定vue对象作用于那个元素上
            el: '#app',
            // data : 定义数据
            data: {
                divShow:true,
                pic: 'https://t7.baidu.com/it/u=3439093793,987421329&fm=193&f=GIF',
                langs: ['java','C#','html','js'],
                price: 100
            },
            methods: {
                handleToggle:function(){
                    this.divShow = !this.divShow;
                }
            },
            filters: {
                myCurrency:function(data,arg){
                    return arg + data
                }
            }
        })

    </script>
    
</body>
</html>